<template>
  <modal name="video" ref="video" :height="height" :width="width" :reset="true" class="p-video-dialog"
         @before-close="onClose"
         @before-open="onOpen">
    <p-video-player v-show="show" ref="player" :source="source" :height="height.toString()"
                    :width="width.toString()" :autoplay="true" :loop="loop"></p-video-player>
  </modal>
</template>
<script>
export default {
  name: 'p-video-dialog',
  data() {
    return {
      show: false,
      source: "",
      defaultWidth: 640,
      defaultHeight: 480,
      width: 640,
      height: 480,
      video: null,
      album: null,
      loop: false,
    }
  },
  methods: {
    onOpen(ev) {
      this.video = ev.params.video;
      this.album = ev.params.album;
      this.play();
    },
    onClose() {
      this.$refs.player.pause();
      this.show = false;
    },
    play() {
      if (!this.video) {
        this.$notify.error("no video selected");
        return;
      }

      let main = this.video.mainFile();
      let file = this.video.videoFile();
      let uri = this.video.videoUrl();

      if (!uri) {
        this.$notify.error("no video selected");
        return;
      }

      const vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      const vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

      let width = 0;
      let height = 0;

      if (file.Width > 0) {
        width = file.Width;
      } else if (main && main.Width > 0) {
        width = main.Width;
      } else {
        width = this.defaultWidth;
      }

      if (file.Height > 0) {
        height = file.Height;
      } else if (main && main.Height > 0) {
        height = main.Height;
      } else {
        height = this.defaultHeight;
      }

      this.loop = file.Duration >= 0 && file.Duration <= 5000000000;

      this.width = width;
      this.height = height;

      if (vw < (width + 80)) {
        let newWidth = vw - 120;
        this.height = Math.round(newWidth * (height / width));
        this.width = newWidth;
      }

      if (vh < (this.height + 100)) {
        let newHeight = vh - 160;
        this.width = Math.round(newHeight * (width / height));
        this.height = newHeight;
      }

      // Resize video overlay.
      this.$refs.video.setInitialSize();
      let size = {width: this.width, height: this.height}
      this.$refs.video.onModalResize({size});

      // Play by triggering source change event.
      this.source = uri;
      this.show = true;
    },
  },
}
</script>
